<template>
	<view class="content">
    <view class="head">
      <view class="flex-row1 align-center">
        <view class="flex1 align-center">
          <image
              class="label_1"
              referrerpolicy="no-referrer"
              src="/static/file/icon.png"
          />
          <view class="text_1">不一网络科技社</view>
        </view>
        <view class="flex-right">
          <view class="flex1 align-center">
          <view class="text_2">我们能做什么</view>
          </view>
          <view class="flex1 align-center">
            <view class="text_3">联系我们</view>
          </view>
          <view class="flex1 align-center">
            <image
                class="label_2"
                referrerpolicy="no-referrer"
                src="/static/file/table.png"
            />
          </view>
        </view>
       
      </view>
      <view class="text-wrapper_4 flex-row"><text class="text_4">“</text></view>
      <view class="text-wrapper_2 flex-col"><text class="text_5">”</text></view>
      <view class="block_2 flex-col">
        <view class="paragraph_1">
          我们提供
          <br />
          强大而全面的的
          <br />
          全终端解决方案
        </view>
        <image
            class="image_1"
            referrerpolicy="no-referrer"
            src="/static/file/left.png"
        />
      </view>
    </view>
    <view class="box_5 flex-col">
      <view class="block_4 flex-row justify-between">
        <view class="list_2 flex-row">
          <view
              class="list-items_2 flex-col"
              v-for="(item, index) in loopData0"
              :key="index"
          >
            <image
                class="image_3"
                referrerpolicy="no-referrer"
                :src="item.lanhuimage0"
            />
            <text class="text_6">{{ item.lanhutext0 }}</text>
          </view>
        </view>
        <view class="group_2 flex-col">
          <view class="image-wrapper_1 flex-col">
            <image
                class="image_4"
                referrerpolicy="no-referrer"
                src="/static/file/qita.png"
            />
          </view>
          <text class="text_7">其他小程序</text>
        </view>
      </view>
      <view class="text_8">
        一套代码编到15个平台，这不是梦想。眼见为实，扫描15个二维码，亲自体验最全面的跨平台效果！
      </view>
    </view>
    <view class="text-wrapper_3 flex-col">
        <text class="text_9">专业团队</text>
    </view>
    <!-- MEDICAL TEAM 团队-->
    <u-row>
      <u-col span="12" style=";background-color:#003588;padding: 15px 10px">
        <view
					class="scroll-list"
				>
					<view
						class="scroll-list__goods-item"
						v-for="(item, index) in goodsArr"
						:key="index"
						:style="{backgroundColor: (index === 1) ? '#007beb' : ''}"
					>
						<image
							class="scroll-list__goods-item__image"
							:src="goodsBaseUrl + item.thumbnail"
							mode=""
						></image>
						<text class="scroll-list__goods-item__text">{{ item.name }}</text>
            <view style="color: #3783cc;font-size: 8px;">开发工程师</view>
            <view style="color: #fff;font-size: 7px;">开发瑟夫瑟夫色</view>
            <view style="color: #fff;font-size: 7px;">开发色的分色法瑟夫瑟夫二手房瑟夫色粉色色</view>
            
					</view>
					<view
						class="scroll-list__show-more"
						@tap="showMore"
					>
						<text class="scroll-list__show-more__text">查看更多</text>
						<u-icon
							name="arrow-leftward"
							color="#f56c6c"
							size="12"
						></u-icon>
					</view>
				</view>
      </u-col>

    </u-row>


    <view class="box_2 flex-col">
      <view class="paragraph_2">
        <view>商务合作：bd@dcloud.io</view>
        <view>广告合作：uniad@dcloud.io</view>
        <view>DCloud 即数字天堂（北京）网络技术有限公司是</view>
        <view>W3C 成员及 HTML5中国产业联盟 发起单位</view>
        <view>京ICP备12046007号-4</view>
        <view></view>
        <view>京公网安备：11010802035340号</view>
        <view>国家信息安全等级保护三级，证书编号：11010813802-20001</view>
      </view>
      <image
        class="image_8"
        referrerpolicy="no-referrer"
        src="/static/file/endl.png"
      />
      <image
        class="image_2"
        referrerpolicy="no-referrer"
        src="/static/file/comput1.png"
      />
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
      goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
			menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
			goodsArr: [{
					name: '周豪',
					thumbnail: '1.jpg'
				},
				{
					name: '周加豪',
					thumbnail: '2.jpg'
				},
				{
					name: '周加豪',
					thumbnail: '6.jpg'
				},
				{
					name: '周加豪',
					thumbnail: '5.jpg'
				},
				{
					name: '周加豪',
					thumbnail: '2.jpg'
				},
				{
					name: '周加豪',
					thumbnail: '3.jpg'
				},
				{
					name: '周加豪',
					thumbnail: '4.jpg'
				},
				{
					name: '周加豪',
					thumbnail: '1.jpg'
				}
			],
				title: 'Hello',
        loopData0: [
          {
            lanhuimage0:'/static/file/andro.png',
            lanhutext0: '安卓'
          },
          {
            lanhuimage0:'/static/file/iphone.png',
            lanhutext0: 'IOS'
          },
          {
            lanhuimage0:'/static/file/xiaochengxu.png',
            lanhutext0: '微信小程序'
          },
        ],
        constants: {},
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style >
	.content {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    height: 100vh;

	}
  .head{
    background: url("/static/file/head.png")
    100% no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 5px 10px 60rpx 10px;

  }
  .flex-row1 {
  display: flex;
  }

 .align-center {
  align-items: center;
    }
  .flex-right {
    display: flex;
    align-items: center;
    justify-content:space-between;
  }

  .flex-right > view {
  margin-left: 30px;
}

 .flex1 {  
    flex: 1;
    display: flex;

  }
  .head_position_right{

  }
  .label_1 {
    width: 15px;
    height: 17px;
  }
  .text_1 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-family: TRENDS;
    text-align: left;
    white-space: nowrap;
    line-height: 36px;
    margin-left: 10px;
  }
  .text_2 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    line-height: 36px;
  }

  .text_3 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    line-height: 36px;
  }
  .label_2 {
    width: 14px;
    height: 16px;
  }
  .text-wrapper_4 {
    margin: 0px 200px 0 3px;
  }

  .text_4 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 90px;
  }
  .text-wrapper_2 {
    background-image: url("/static/file/right2.png");
    background-repeat: no-repeat;
    height: 166px;
    background-size: 100% 100%;
    width: 250px;
    position: absolute;
    right: 0;
    top: 122rpx;
  }
  .text_5 {
    height: 100px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30px;
    text-align: left;
    white-space: nowrap;
    margin: -5px 574px 363px 0;
  }

  .block_2 {
    position: absolute;
    left: 0;
    top: 150rpx;
    width: 180px;
    height: 180px;
    background: url("@/static/file/net.png")
    100% no-repeat;
    background-size: 100% 100%;
    padding: 0 30px 40px 30px;
  }

  .paragraph_1 {
    width: 105px;
    height: 60px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 13px;
    font-weight: NaN;
    text-align: left;
    margin: -10px 5px 0 15px;
  }

  .image_1 {
    width: 125px;
    height: 88px;
    margin-top: 5px;
  }
  .box_5 {
    width: 100%;
    margin-top: 120rpx;
    position: relative;
    text-align: center;

  }
  .block_4 {
    display: flex;
    align-items: center;
    width: 75%;
    margin: 10px auto;
  }

  .list_2 {
    width: 75%;
    height: 100px;
    display: flex;
    margin-top: 25px;
    justify-content: space-between;
  }

  .list-items_2 {
    margin-right: 20px;
  }

  .image_3 {
    width: 50px;
    height: 50px;
  }

  .text_6 {
    width: 105px;
    overflow-wrap: break-word;
    color: rgba(70, 130, 66, 1);
    font-size: 11px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    align-self: center;
    margin-top: 15px;
  }

  .group_2 {
  }

  .image-wrapper_1 {
    background: url()
    100% no-repeat;
    margin-left: 10px;
    background-size: 100% 100%;

  }

  .image_4 {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(187, 227, 204, 1);
    margin: 16px 10px -15px -10px;


  }
  .text_7 {
    overflow-wrap: break-word;
    color: rgba(70, 130, 66, 1);
    font-size: 11px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    line-height: 55px;
    margin: 60px 14px 0 0;

  }
  .text_8 {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 12rpx;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
    position: absolute;
    bottom: 0rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .text-wrapper_3 {
  background: url("/static/file/team.png")
    100% no-repeat;
  background-size: 100% 100%;
  text-align: center;
 
}

.text_9 {
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 42px;
}


.box_2 {
  background-color: rgba(242, 242, 242, 1);
  position: absolute;
  bottom: 0;
  
}

.paragraph_2 {
  width: 100vw;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 5px;
  font-weight: NaN;
  text-align: center;
  line-height: 10px;
  padding: 10px 0;
}


.image_2 {
  position: absolute;
  right: 0;
  top: -30px;
  width: 200rpx;
  height: 147rpx;
}
.image_8 {
  position: absolute;
  left: 45rpx;
  top: -30px;
  width: 150rpx;
  height: 140rpx;
}

.scroll-list{
  display: flex;
  overflow-x: auto;

}

.scroll-list__goods-item{
  padding: 10px 15px;
  
}


.scroll-list__goods-item__image{
      width: 60px;
			height: 60px;
			border-radius: 60px;
}
.scroll-list__goods-item__text{
      color: #fff;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
}

.scroll-list__show-more{
  background-color: #fff0f0;
		border-radius: 3px;
		padding: 3px 6px;
		flex-direction: column;
		align-items: center;
}

.scroll-list__show-more__text{
    font-size: 12px;
    width: 12px;
    color: #f56c6c;
    line-height: 16px;
}





</style>
